<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>万无"疫"失物联网平台</title>
  <style>
body{
  background-image: url("https://img1.baidu.com/it/u=3280505320,3270945142&fm=253&fmt=auto&app=138&f=JPEG?w=641&h=400");
  background-size: cover;
}
.a{
  border-radius: 5px;
  background-color: rgba(23,197,171,0.4);
  padding: 20px;
}
h1{
  text-align: center;
  text-transform: uppercase;
  color: #4CAF50;
}
label{
text-decoration-color: #FFFFFF;
}
.button{
  width: 18%;
  display: inline-block;
  border-radius: 4px;
  background-color: rgb(152,251,152);
  border: none;
  color: #000000;
  text-align: center;
  font-size: 80%;
  padding: 20px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span{
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after{
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span{
  padding-right: 25px;
}

.button:hover span:after{
  opacity: 1;
  right: 0;
}
input[type=text]{
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid #555;
  outline: none;
  transition: width 1s ease-in-out;
}
input[type=text]:focus{
  width: 70%;
}
input[type=text]:focus{
  background-color: lightblue;
}
table{
  background: rgba(0,255,255,0.4);
  width: 100%;
  border-collapse: collapse;
}

th, td{
  text-align: center;
  padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th{
  background-color: #4CAF50;
  color: white;
}
</style>
  <script type="text/javascript">
  function refresh() {
    xhttp.onreadystatechange = function(){
      if(this.readyState == 4 && this.status == 200){
        procQueryResponse(this.responseText);
    }
  };
    xhttp.open("GET","/students",true);
    xhttp.setRequestHeader('Accept','application/json');
    xhttp.send();
  }
  function procQueryResponse(responseText){

    const obj = JSON.parse(responseText);
      if(obj.success){
        const tblBody = document.getElementById('students');
        tblBody.innerHTML = '';
        for(let student of obj.data){
          const tr = document.createElement('tr');
          const td1 = document.createElement('td');
          td1.innerText = student.id;
          const td2 = document.createElement('td');
          td2.innerText = student.name;
          const td3 = document.createElement('td');
          td3.innerText = student.sex;
          const td4 = document.createElement('td');
          td4.innerText = student.age;
          const td5 = document.createElement('td');
          td5.innerText = student.point;
          const td6 = document.createElement('td');
          const iptDel = document.createElement('input');
          iptDel.type = 'button';
          iptDel.value = '删除';
          iptDel.addEventListener('click', function(){
            onDelete(student);
            return false;
          });
          const iptUpdate = document.createElement('input');
          iptUpdate.type = 'button';
          iptUpdate.value = '修改';
          iptUpdate.addEventListener('click', function(){
            update(student);
            return false;
          });
          td6.appendChild(iptDel);
          td6.appendChild(iptUpdate);
          tr.appendChild(td1);
          tr.appendChild(td2);
          tr.appendChild(td3);
          tr.appendChild(td4);
          tr.appendChild(td5);
          tr.appendChild(td6);
          tblBody.appendChild(tr);
        }
      }
  }
  function onDelete(student) {
    console.log('删除中....');
    console.log(student);
    xhttp.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
            const obj = JSON.parse(this.responseText);
            console.log(obj);
            if(obj.success){
              alert('删除成功!');
              refresh();
            }else{
              alert('删除失败!');
            }
        }
    }
    xhttp.open("POST","/student/delete?id=" + student.id,true);
    xhttp.setRequestHeader('Accept','application/json');
    xhttp.send();
  }
  function add(){
    const iptName = document.getElementById('iptName');
    const iptSex = document.getElementById('iptSex');
    const iptAge = document.getElementById('iptAge');
    const iptPoint = document.getElementById('iptPoint');
    xhttp.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
            const obj = JSON.parse(this.responseText);
            console.log(obj);
            if(obj.success){
              alert('添加成功!');
              refresh();
            }else{
              alert('添加失败!');
            }
        }
    }
    xhttp.open("POST","/student/add?name=" + iptName.value + '&sex=' + iptSex.value + '&age=' + iptAge .value+'&point=' + iptPoint.value,true);
    xhttp.setRequestHeader('Accept','application/json');
    xhttp.send();
  }
  function update(student){
    console.log('更新中...');
    const iptName = document.getElementById('iptName');
    const iptSex = document.getElementById('iptSex');
    const iptAge = document.getElementById('iptAge');
    const iptPoint = document.getElementById('iptPoint');
    const iptId = document.getElementById('iptId');
    iptId.value = student.id;
    iptName.value = student.name;
    iptSex.value = student.sex;
    iptAge.value = student.age;
    iptPoint.value = student.point;
  }
  function onUpdate(){
    const iptName = document.getElementById('iptName');
    const iptSex = document.getElementById('iptSex');
    const iptAge = document.getElementById('iptAge');
    const iptPoint = document.getElementById('iptPoint');
    const iptId = document.getElementById('iptId');
    xhttp.onreadystatechange = function(){
            if(this.readyState == 4 && this.status == 200){
                const obj = JSON.parse(this.responseText);
                console.log(obj);
                if(obj.success){
                  alert('修改成功!');
                  refresh();
                }else{
                  alert('修改失败!');
                }
            }
        }
        xhttp.open("PUT","/student/update?name=" + iptName.value + '&sex=' + iptSex.value + '&age=' + iptAge.value + '&point='+ iptPoint.value +'&id='+ iptId.value,true);
        xhttp.setRequestHeader('Accept','application/json');
        xhttp.send();
  }

  function getById(){
    const iptId = document.getElementById('iptId');
    xhttp.onreadystatechange = function(){
      if(this.readyState == 4 && this.status == 200){
        procQueryResponse(this.responseText);
    }
  };
    xhttp.open("GET","/student?id=" + iptId.value,true);
    xhttp.setRequestHeader('Accept','application/json');
    xhttp.send();

  }
  function Map() {
    window.location.href = 'map.html';
  }

  var xhttp = new XMLHttpRequest();

  window.onload = function(){
    refresh();
  }
</script>
</head>
<body>
<div>
<h1>万无"疫"失物联网平台</h1>
<form class="a">
<label  for="iptId">学生学号</label>
<div>
<input id="iptId" type="text" placeholder="输入学号" name="id" >
</div>
<label for="iptName">学生名字</label>
<div>
<input id="iptName" type="text" placeholder="输入学生名字" name="name">
</div>
<label for="iptSex">学生性别</label>
<div>
<input id="iptSex" type="text" placeholder="输入性别" name="sex">
</div>
<label for="iptAge">学生年龄</label>
<div>
<input id="iptAge" type="text" placeholder="输入年龄" name="age">
</div>
<label for="iptPoint">学生坐标</label>
<div>
<input id="iptPoint" type="text" placeholder="输入坐标" name="point">
</div>
<input  class="button" type="button" value="添加" onclick="add()">
<input  class="button" type="button" value="刷新" onclick="refresh()">
<input  class="button" type="button" value="查询" onclick="getById()">
<input  class="button" type="button" value="确认修改" onclick="onUpdate()">
<input  class="button" type="button" value="行动轨迹" onclick="Map()">
</form>
<table>
<thead>
<tr>
<th>学号</th>
<th>学生名字</th>
<th>学生性别</th>
<th>学生年龄</th>
<th>学生坐标</th>
<th>操作</th>
</tr>
</thead>
<tbody id="students"></tbody>
</table>

</div>

</body>
</html>